<!doctype html>
<html class="no-js">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

  <title>萌宠之家-C2B2C社会化电商平台->运营后台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="../statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
  <!-- 百度编辑器
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
      var ue = UE.getEditor('editor',{
              initialFrameWidth:"100%" //初始化选项
              //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
          }
      );
  </script>
   -->
  <script src="../statics/AmazeUI/assets/js/validator.js"></script>
  <script src="../statics/js/plugin/jquery.livequery.js"></script>
  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用
  <script src="statics/js/plugin/jquery.form.js"></script>
   -->
  <!--
  <script>
      $().ready( function() {
          AMUI.plugin('mySelected', AMUI.selected);
          $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
      });
  </script>
      -->
  <script src="../statics/js/plugin/jquery.metadata.js"></script>
  <script src="../statics/js/plugin/jqPaginator.min.js"></script>
  <script src="../statics/js/base.js"></script>
  <script src="../statics/js/jquery.lSelect.js"></script>
  <!-- 公共head End -->
</head>
<body>
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf app-padding-title">
        <div class="am-fl am-cf">
          <strong class="am-text-primary am-text-lg">商品管理</strong> / <small>商品审核</small>
        </div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dotted am-margin-0" />
      
      <form class="am-form" id="listForm" onsubmit="return false;" action="http://localhost:8080/product/search" method="post">
      <div class="am-g app-padding-toolbar">

        <div class="am-u-sm-5 am-u-md-4 am-padding-0">
          <div class="app-padding-toolbar-item">
            <select id="categoryIds" name="categoryIds" data-am-selected="{btnWidth: '100%', maxHeight: '200px', btnSize: 'sm'}">
              <option value="0">全部</option>
            </select>
          </div>
        </div>
        
        <div class="am-u-sm-12 am-show-sm-only am-margin-xs"></div>
        
        <div class="am-u-sm-12 am-u-md-4 am-padding-right-0">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" name="productName" id="productName" value="" placeholder="请输入商品名称" />
            <span class="am-input-group-btn">
              <button id="searchButton" class="am-btn am-btn-default" type="button">搜索</button>
            </span>
          </div>
        </div>

        <div class="am-u-sm-7 am-u-md-4">&nbsp;</div>

      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      
      <div class="am-scrollable-horizontal">
        <table id="tblProductList" class="am-table am-table-striped am-table-hover table-main am-text-nowrap am-margin-bottom-0">
          <thead>
            <tr>
              <th>序号</th>
              <th><div class="app-table-td-buttons-width-160">操作</div></th>
              <th>宠物名称</th>
              <th>卖家</th>
              <th>商品分类</th>
              <th>售价</th>
              <th>审核</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- 分页 -->
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      <div id="divPagination" class="am-margin-left am-text-xs">
        <ul id="pagination" class="am-pagination"></ul>
      </div>

      <h3 id="noData" style="display: none;" class="am-kai am-text-center am-margin-xs">没有找到任何记录!</h3>
      </form>
    </div>
  </div>
  <!-- content end -->
</body>
<script>
    // 商品列表
    let productList = new Array();

    // 商品分类列表
    let categoryList = new Array();

    // 查询条件对象
    let queryObject = new Object();
    queryObject.statusList = '2,3,4,5,6';

    let jsonUser;
    let token;

    $().ready(function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("admin");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'admin_login.html';
            return;
        }

        // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
        if(self.location == top.location)
            location.href='admin_center.html';

        // 注册查询按钮事件
        $("#searchButton").click(function(){

            // 获取查询数据
            let categoryIds = $("#categoryIds").val();
            let productName = $("#productName").val();

            // 封装查询请求数据
            queryObject.categoryIds = categoryIds;
            queryObject.productName = productName;

            // 加载'商品列表'数据
            loadProductList();


        });// $("#searchButton").click(function());


        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'商品'列表数据
        loadProductList();

    });// $().ready(function());

    /**	加载'商品'列表数据 **/
    function loadProductList() {

        // 加载'商品列表'数据
        $.post('http://localhost:8080/product/search', queryObject, function (result) {

            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            let pageResult = result.data;

            productList = pageResult.list;

            // 填充表格数据
            fillProductList();

            // 初始化分页插件
            $("#pagination").remove();
            $("#divPagination").append('<ul id="pagination" class="am-pagination"></ul>');

            $.jqPaginator( '#pagination', {
                totalPages: pageResult.pages,
                totalCounts:pageResult.total,
                visiblePages: 10,
                currentPage: pageResult.pageNum,
                prev: '<li><a href="javascript:void(0);"><span class="am-icon-arrow-circle-left"></span> 上一页</a></li>',
                next: '<li><a href="javascript:void(0);">下一页 <span class="am-icon-arrow-circle-right"></span></a></li>',
                page: '<li><a href="javascript:void(0);">{{page}}</a></li>',
                activeClass: 'am-active',
                onPageChange:function( num, type ){

                    // 加载指定页码数据
                    if (type == 'change'){
                        queryObject.currentPage = num;
                        loadProductList();
                    }

                }// onPageClick();

            });// $("#pagination").twbsPagination();

            $("#pagination").append('<li>共' + pageResult.pages + '页</li>');

        });// $.post();

    }// loadProductList();

    /** 填充表格数据 **/
    function fillProductList( ) {

        // 清空表格数据
        $('#tblProductList tbody').empty();
        // 隐藏显示提示
        $('#noData').hide();

        // 如果没有集合数据，就直接返回
        if( !productList || productList.length == 0 ){
            // 设置没有数据提示
            $('#noData').show();
            return;
        }// if();

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < productList.length; i++ ) {

            let product = productList[i];

            let trId = '<tr id="listTr' + product.id + '">';

            // 序号
            let tdNo = '<td>' + (i+1) + '</td>';

            // 操作
            let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

            // ‘审核通过’按钮
            let btnPass = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary app-table-button-padding" onclick="auditOne(' + PRODUCT_STATUS_CONST.PASS + ', \'' + product.id + '\')">'
                + '<span class="am-icon-check-circle-o"> 审核通过</span></button>';

            // ‘审核拒绝’按钮
            let btnReject = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger app-table-button-padding" onclick="auditOne(' + PRODUCT_STATUS_CONST.REJECT + ', \'' + product.id + '\')">'
                + '<span class="am-icon-minus-square-o"> 审核拒绝</span></button>';

            // 如果商品状态为‘审核中’
            if( product.status == PRODUCT_STATUS_CONST.PENDING ) {
                // 就显示‘审核通过’和‘审核拒绝’按钮
                tdOpt += btnPass + btnReject + '</div></td>';

            } else if( product.status == PRODUCT_STATUS_CONST.REJECT ){
                // 如果商品状态为‘拒绝’，就不显示任何操作按钮
                tdOpt += '&nbsp;</div></td>';

            }

            // 商品名称
            let tdName = '<td class="productName"><a href="../product_content.html?id=' + product.id + '&cid=' + product.categoryId + '">';

            // 商品图片
            let tdImage = '<img width="60px" height="60px" style="border: 1px solid #ddd;" src="' + IMAGE_URL_CONST.PRODUCT + product.mainImage + '" />&emsp;';

            // 封装商品名称
            tdName += tdImage + product.name + '</a></td>';

            // 卖家
            let tdSellerName = '<td><div class="am-text-truncate">'
                + '<a target="_blank" href="../seller_item_list.html?id=' + product.userId
                + '">' + product.username + '</a></div></td>';

            // 分类
            let tdCategory = '<td>' + getCategoryPath(product.categoryId) + '</td>';

            // 价格
            let tdPrice = '<td>' + priceCurrencyFormat(product.price) + '</td>';

            // 是否审核通过
            let tdPass = '<td>&nbsp;</td>';

            // 判断商品状态
            // 如果‘商品状态’为‘审核拒绝’
            if( product.status == PRODUCT_STATUS_CONST.REJECT ) {
                // 就显示‘X’标记
                tdPass = '<td><i class="am-icon-close"></i></td>';

            } else if( product.status != PRODUCT_STATUS_CONST.WAIT_SUBMIT
                && product.status != PRODUCT_STATUS_CONST.PENDING  ) {
                // 如果‘商品状态’不是‘待发布’和‘审核中’，就显示‘√’符号
                tdPass = '<td><i class="am-icon-check"></i></td>';
            }

            // 封装整条tr单元格
            trId += tdNo + tdOpt + tdName + tdSellerName + tdCategory + tdPrice + tdPass + '</tr>';

            // 将构造好的单元格数据，填充到表格中
            $('#tblProductList tbody').append(trId);

        }// for();

    }// fillProductList();

    /**	加载'商品分类'列表数据 **/
    function loadCategoryList() {

        // 加载'商品分类'数据
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/category/getAll',
            async: false,
            success: function (result) {

                // 如果返回的数据的响应码不是'成功(200)'
                if (result.code != 200) {
                    Modal.alert(result.msg);
                    return;
                }

                // 如果返回的数据响应码为200
                // 就进行表格数据填充
                categoryList = result.data;

                // 填充表格数据
                fillCategoryList();

            }// success();

        });// $.post();

    }// loadCategoryList();

    /** 填充表格数据 **/
    function fillCategoryList( ) {

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，不等于0，就跳过本次循环
            if( category.parentId != 0 ) continue;

            // 就将数据字典项添加到<select>下拉框中
            let optItem = '<option value="' + getChildrenCategoryIds(category.id) + '">'+ category.name +'</option>';
            $('#categoryIds').append(optItem);

            // 填充子分类列表
            fillChildrenCategoryList(category.id);

        }// for();

    }// fillCategoryList();

    /** 根据父分类id，填充子分类列表 **/
    function fillChildrenCategoryList( parentId ) {

        // 循环构造单元格数据，并进行填充
        for( let i = 0; i < categoryList.length; i++ ) {

            let category = categoryList[i];

            // 如果当前分类的父id，不等于传入的分类id，就跳过本次循环
            if( category.parentId != parentId ) continue;

            // 就将数据字典项添加到<select>下拉框中
            let optItem = '<option value="' + category.id + '">&nbsp;--&nbsp;'+ category.name +'</option>';
            $('#categoryIds').append(optItem);

        }// for();

    }// fillChildrenCategoryList( parentId );

  /** 根据商品分类id，获取商品分类路径信息 **/
  function getCategoryPath( categoryId ) {

      // 分类路径
      let categoryPath = "";

      // 父分类id
      let parentCategoryId;

      // 子分类名称
      let childCategoryName;

      // 循环查找父分类id
      for( let i = 0; i < categoryList.length; i++ ) {

          let category = categoryList[i];

          // 如果当前分类的id，等于传入的分类id
          if( category.id == categoryId ){
              // 设置父分类id
              parentCategoryId = category.parentId;
              // 设置子分类名称
              childCategoryName = category.name;
              break;
          }

      }// for();

      // 循环查找父分类名称
      for( let i = 0; i < categoryList.length; i++ ) {

          let category = categoryList[i];

          // 如果当前分类的父id，等于找到的父分类id
          if( category.id == parentCategoryId ){
              // 设置当前父分类名称路径
              categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
              break;
          }

      }// for();

      return categoryPath;


  }// getCategoryPath( categoryId );

  /** 根据商品分类父id，获取子分类id列表 **/
  function getChildrenCategoryIds( parentCategoryId ) {

      // 分类id列表字符串
      let categoryIds = "";

      // 循环构造单元格数据，并进行填充
      for( let i = 0; i < categoryList.length; i++ ) {

          let category = categoryList[i];

          // 如果当前分类的父id，不等于传入的父分类id，就跳过本次循环
          if( category.parentId != parentCategoryId ) continue;

          // 如果当前分类的父id，等于传入的父分类id
          categoryIds += category.id + ",";

      }// for();

      // 去掉最后1位(,)逗号
      categoryIds = categoryIds.substring(0, categoryIds.length - 1);

      return categoryIds;

  }// getChildrenCategoryIds( parentCategoryId );

  /**
   * 商品'审核'操作
   * @param status 状态码
   * @param productId 商品id
   */
  function auditOne( status, productId ) {

      Modal.register(['confirm','alert']);
      Modal.confirm("您确定要执行此操作吗？",{
          relatedTarget: this,
          onConfirm: function(options) {
              $.ajax({
                  type: 'POST',
                  url: 'http://localhost:8080/product/audit',
                  dataType: "json",
                  async: false,
                  data: {
                      token: token,
                      status: status,
                      productId: productId
                  },
                  success: function( result ) {

                      // 如果返回的数据的响应码不是'成功(200)'
                      if (result.code != 200) {
                          Modal.alert(result.msg);
                          return;
                      }

                      // 如果返回的数据响应码为200
                      Modal.alert('操作成功！');

                      // 刷新商品列表
                      loadProductList();

                  }// success: function( result );
              });
          }// onConfirm: function(options);
      });
  }// AuditOne( status, productId );

</script>
</html>